<template>
    <div class='AddKey'>
        <el-drawer title="添加key" v-model="drawerAddVisible" :before-close="before_close" direction="rtl" size="400px">
            <div class="drawer-content">
                <div class="form">
                    <div class="item">
                        <span>名称</span>
                        <el-input class="ml-10 f-1" size="small" v-model="input_name" placeholder="key"></el-input>
                    </div>
                    <div class="item">
                        <span>类型</span>
                        <el-select class="ml-10 f-1" size="small" v-model="input_type" placeholder="选择key的类型">
                            <el-option v-for="item in typeList" :key="item.value+1" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="footer">
                        <el-button @click="submit(false)" size="small" type="primary">添加数据并确定</el-button>
                        <el-button disabled @click="submit(true)" size="small" type="success">创建并添加默认数据</el-button>
                    </div>
                </div>
                <div class="footer">
                    <el-button @click="drawerAddVisible = false">取 消</el-button>
                </div>
            </div>
        </el-drawer>
        <add-key-value @refresh="refresh" :select_key_new="input_name" :type="input_type" v-model="add_value_show"></add-key-value>
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';
import AddKeyValue from '@/views/AdminKey/components/comps/AddKeyValue'
import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
import { pub_keyType } from '@/api/key/pub';
export default defineComponent({
    name: 'AddKey',
    components: { AddKeyValue },
    setup(omprops, content) {
        const typeList = [
            {
                value: 'none',
                label: '请选择key的类型'
            }, {
                value: 'string',
                label: 'String(字符串)'
            }, {
                value: 'hash',
                label: 'Hash(哈希)'
            }, {
                value: 'list',
                label: 'List(列表)'
            }, {
                value: 'set',
                label: 'Set(集合)'
            }, {
                value: 'zset',
                label: 'Zset(有序集合)'
            }
        ]
        const state = reactive({
            typeList,
            loading: false,
            add_value_show: false,

            input_type: 'none',
            input_name: ''
        })
        return toRefs(state)
    },
    props: {
        modelValue: Boolean,
    },
    computed: {
        drawerAddVisible: {
            set(v) {
                this.$emit('update:modelValue', v)
            },
            get() {
                return this.modelValue
            }
        }
    },
    watch: {},
    mounted() { }, // 组件挂载完成后执行的函数。
    methods: {
        refresh(key) {
            this.input_type = 'none'
            this.input_name = ''
            this.drawerAddVisible = false
            if (typeof key != 'undefined') {
                this.$store.commit('key/SET_SELECT', key)
            }
        },
        submit(yes) {
            if (this.input_name == '') {
                ElNotification({
                    title: '请先输入key',
                    type: 'warning',
                    duration: 1000
                })
                return
            }
            if (this.input_type == 'none') {
                ElNotification({
                    title: '请选择key的类型',
                    type: 'warning',
                    duration: 1000
                })
                return
            }
            pub_keyType(this.input_name).then((res) => {
                if (res.data.map.type == 'none') {
                    if (yes) { // 创建并添加默认数据

                    } else { //添加数据并确定
                        this.add_value_show = true
                    }
                } else {
                    ElNotification({
                        title: 'key已存在，类型为：'+res.data.map.type,
                        type: 'warning'
                    })
                }
            })

        },
        // 关闭前回调
        before_close(done) {
            if (this.loading) {
                ElMessage('正在提交内容，请稍后！')
            } else {
                done()
            }
        },
    },
})
</script>

<style scoped lang="less">
.AddKey {
}
.drawer-content {
    display: flex;
    flex-direction: column;

    height: 100%;
    position: relative;
    overflow-y: hidden;
    .form {
        flex: 1;
        overflow-y: hidden;
        > .item {
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            > span {
                width: 40px;
            }
        }
    }
    .footer {
        padding-top: 10px;
        display: flex;
        button {
            flex: 1;
        }
    }
}
</style>